<template>
	<uni-card spacing="0" :is-shadow="false" :border="false">
		<view class="item-dom">
			<view class="flex-row flex-row-space-between">
				<text class="title">{{detailsData.positionName}}</text>
				<text class="money">{{detailsData.recruitingNumbers}}人</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-gongsi" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>公司名称： {{detailsData.companyName}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-dianhua" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>联系电话： {{detailsData.contact}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-youxiang" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>联系邮箱： {{detailsData.email}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-shijian" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>工作时间： {{detailsData.workTime}}</text>
			</view>
			<view class="flex-row">
				<text class="iconfont icon-dizhi" style="padding-right: 15rpx;  color: #01c2b7"></text>
				<text>工作地址： {{detailsData.workPlace}}</text>
			</view>
		</view>
	</uni-card>

	<view style="padding-bottom: 10px;">
		<uni-card spacing="0" :is-shadow="false" :border="false">
			<view class="item-dom">
				<view class="flex-row flex-row-space-between">
					<text class="title">职位详情</text>
				</view>
				<view v-if="detailsData.positionDescribe">
					<uni-section title="岗位描述:" type="line" />
					<view style="padding:  0 10px;">
						<text>{{detailsData.positionDescribe}}</text>
					</view>
				</view>
				<view v-if="detailsData.requirement">
					<uni-section title="任职要求:" type="line" />
					<view style="padding:  0 10px;">
						<text>{{detailsData.requirement}}</text>
					</view>
				</view>
				<view v-if="detailsData.salary">
					<uni-section title="薪资待遇:" type="line" />
					<view style="padding:  0 10px;">
						<text>{{detailsData.salary}}</text>
					</view>
				</view>
				<view v-if="detailsData.welfareTreatment">
					<uni-section title="福利待遇:" type="line" />
					<view style="padding:  0 10px;">
						<text>{{detailsData.welfareTreatment}}</text>
					</view>
				</view>
			</view>
		</uni-card>
	</view>

	<view class="sticky-b10 p10">
		<button @click="phoneOk" type="default" class="basicbutton m10" hover-class="basicbutton-hover">咨询电话</button>
	</view>
</template>

<script lang="ts" setup>
	import { getUser } from "@/utils/storage"
	import { Recruit } from "@/api/tables/Recruit"
	import { recruitDetail } from "@/api/recruit"
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'

	let detailsData = ref<Recruit>({});

	onLoad((option) => {
		let userData = getUser()
		getDetail(option.itemID, userData.userId)
	});
	function getDetail(id, studentId) {
		recruitDetail({ id, recruitmentId: id, studentId }).then(res => {
			if (res.code == '200') {
				detailsData.value = res.data
			}
		})
	}
	function phoneOk() {
		uni.makePhoneCall({
			phoneNumber: detailsData.value.contact
		});
	}
</script>

<style lang="scss" scoped>
	.item-dom {
		font-size: 28rpx;
		color: #999999;
		font-family: "微软雅黑";

		.title {
			font-size: 30rpx;
			line-height: 2;
			color: #131313;
			font-weight: 600;
		}

		.title1 {
			padding-top: 10px;
			font-size: 26rpx;
			line-height: 2;
			color: #333;
		}

		.money {
			font-size: 28rpx;
			color: #2b9395;
			font-weight: 600;
		}

		.tag-dom {
			margin: 0 5px 5px 0;
			padding: 5rpx 15rpx;
			font-size: 20rpx;
			background: #f6f6f6;
			border-color: #f6f6f6;
			border-radius: 2px;
			color: #999;
		}
	}

	.sticky-b10 {
		position: sticky;
		bottom: 0rpx;
		background: #f5f5f5;
	}
</style>